<template>
  <div class="comments" style="margin-bottom: 10px;">
    <div class="comments_user">
      <div style="">
        <div class="comments_user_head" :style="headurl"></div>
        <span>{{commentsinfo.user_name}}</span>
      </div>
    </div>
    <div class="comments_body">
      <div class="comments_icon">
        <svg v-if="commentsinfo.comments==='推荐'" class="icon" aria-hidden="true"><use xlink:href="#icon-dianzan"></use></svg>
        <svg v-else class="icon" style="fill: #cc5d60!important;" aria-hidden="true"><use xlink:href="#icon-buzan"></use></svg>
        <span style="line-height: 30px">{{ commentsinfo.comments }}</span>
      </div>
      <div style="padding: 15px;">
        <p>发布于{{commentsinfo.comments_time}}</p>
        <p style="font-size: 21px">
          {{commentsinfo.comments_word}}
        </p>
      </div>
      <input v-if="commentsinfo.user_name === user.username" style="cursor: pointer;position:absolute;top: 10px;right: 30px;width: 100px;height: 50px;" type="button" value="删除" @click="remove">
    </div>
  </div>
</template>

<script>
import {storeToRefs} from "pinia";
import {mainStore} from "../../../../store";
import {delcomments} from "../../../api/user";
export default {
  name: "comments",
  props:{
    commentsinfo:{
      type:Object
    }
  },
  data(){
    const { islogin,user,token } = storeToRefs(mainStore())
    return{
      user,
      headurl: ''
    }
  },
  created() {
    console.log(this.commentsinfo)
    this.headurl = 'background-image: url('+ this.commentsinfo.USER_HEADER +')'
  },
  methods:{
    remove(){
      const params = {
        commentid: this.commentsinfo.id
      }
      delcomments(params).then(()=>{
        location.reload()
      })
    }
  }
}
</script>

<style scoped>
.comments_user_head{
  top: 0;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 10px 10px 0 0;
  vertical-align: top;
  background-size: 100px;
}
.comments_user:hover{
  color: #c1ccc0;
}
.comments{
  width: 1500px;
  height: 100%;
  background-color: #16202d;
  color: #7d90a4;
  display: flex;
}
.comments_user,.comments_body{
  display: inline-block;
  height: 100%;
}
.comments_user{
  position: relative;
  width: 250px;
  height: 100%;
}
.comments_body{
  width: 1200px;
  position: relative;
}
.icon{
  width: 30px;
  height: 50px;
  vertical-align: middle;
  fill: #60b6e7;

}
</style>
